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Organizing 
Content and 
FOKAS troduced several new 


elements for organizing content and 
forms on Web pages 

¢ The new tags for organizing content 
are <header>, <section>, and 
<footer> 

* The names of these tags are 
representative of semantic markup 


Semantic Markup 


¢ Semantic markup ensures 
that tag names match with HTML 
the function that a tag <footer>Footer</footer> 
performs 


¢ For example, the <footer> tag is used 
to create the footer of a Web page 


¢ In HTML 4.01 and before, 


developers had to rely on the HTML 4.01 
use of the <div> tag to 
perform a variety of 
functions. 


<div id=“footer”>Footer</footer> 


¢ The “div” from the <div> tag is short for 
division 


The <div> tag 


Use of the <div> tag typically requires the use of the class or id 

attributes 

¢ class and id are global attributes, which means that they can be used with all HTML 
elements 

The class and 1d can be assigned any value by a developer 

¢ class Is used to identify a group of elements 

° id is used to identify individual elements 


<div id="about"> 
<div id="about stella"> 
<img src=“dog.jpg' alt="My awesome dog, Stella." /> 
<div id="slogan">Happy dogs are good dogs</div> 
</div> 
</div> 


Markup In HTML 4.01 vs. HTML5 
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<div id=‘nav’> <nav> 


<div id=‘header’> <header> 


<div class= : } 
<div 
Alp Lele. <article> 
class= 


‘aside’> 


<aside> 


<div class= 


<article> 
‘article’> 


<div id=‘footer’> <footer> 


Structural Tags 


<address> Defines an area for contact information for a page or section 
<article> Defines an article, such as a magazine or newspaper article, blog post, or similar content 


<aside> Defines content that’s separate from but related to the page content; similar to a sidebar in 
book chapters and magazine articles 


<details> Contains additional details pertinent to text around it; creates an interactive widget a user can 
display or hide 


<footer> Defines a footer for a document or section; may include the document author, contact 
information, copyright information, and links to terms of use 


<header> Defines a header for a document or section; may contain introductory content or navigation 
links 


<hgroup> Groups headings and subheadings (using the <h1> to <h6> tags) for multi-level headings 
<nav> Defines a block of navigation links 


<section> Defines a section in a document, such as chapters, parts of a thesis, or parts of a Web page 
whose content is distinct from each other 


<summary> Defines a visible heading for a details element; user can click to display or hide information 


The header and footer Elements 


The <header> element defines 

the header for a Web page, 

article, or document 

° A header typically features titles, logos, or 
photos and may be the first thing a user 
sees upon visiting a site 

The <footer> element defines 

a footer for a Web page, article, 

or document and are typically 

located at the bottom 


¢ A footer typically features information 
about a page, such as the copyright date, 
miscellaneous links, 


<article> 
<header> 
<hl>Learning HTML5</h1> 
<h2>Semantic Elements</h2> 
</header> 
<p>These HTML5 tags are great! 
</p> 
<footer> 
<p>Published: <time 
datetime="2015-06- 
20”>June 20, 2015</time></p> 
</footer> 
</article> 


The section Element 


¢ The <section> element defines sections In a document or Web 
page 

¢ There are certain situations where other tags should be used, 
including: 


SITUATION, USE 
Separate content that is independent from other content on article 
the page 

Plan to syndicate a block of content article 
Create a sidebar aside 


Wrap and position multiple sections that are not related to div 
each other 


The hgroup element 


¢ The <hgroup> element is 
used to group headings 


¢ This allows you to organize 
heading tags, but won't 
impact the way things look 
on a web page 


<section> 
<hgroup> 
<h1>HTML5</h1> 
<h3>Structuring a Web 
page</h3> 
</hgroup> 
<article> 
<p>With semantic tags, 
Structuring a web page is 
than ever before! </p> 
</article> 
</section> 


easier 


The nav Element 


The <nav> element is used to organize links that allow users to 
navigate from one page to another 


¢ The <nav> tag shouldn’t be used for every link on a page, but rather to group the links 
together 


<nav> 

<a href="/html/">HTML</a> 

<a href="/css/">CSS</a> 

<a 
href="/javascript/">JavaScript</a> 
</nav> 


The article and 
aside Elements 


¢ The <article> element defines 
independent, self-contained content 


¢ An example of self-contained content 
could be a news article or a blog 
entry 


« The <aside> element Is used to set 
aside a subset of content from the 
overall content 


° It’s important to note that the aside 
tag doesn’t change how the content 
appears on the page 


° If you want to change the placement 
of an element, then you will have to 
use CSS to do so 
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Tables and Lists 


Creating Tables 


¢ Tables consist of columns and rows, and they display content 


ina grid 


¢ To create a table with HTML, you will use a combination of the 


tags featured in the table below 


<table> 
<tr> 
<th> 
<td> 


<colgroup 
> 


<thead> 
<tfoot> 
<tbody> 
<caption> 


creates a table 


creates rows 

creates headers 

creates cells within rows (columns) 

used to apply styles to a range of columns 


marks a group of header rows 
marks a group of footer rows 
used to format groups of rows 
marks text as a caption 


Table Demo 


<caption>Number of hours worked on thesis.</caption> 
<table border="1"> 
<tr> 
<th>Month</th> 
<th>Hours</th> 
</tr> 
<tr> 
<td>April</td> 
<td>100</td> 
</tr> 
<tr> 
<td>June</td> 
<td>45</td> 
</tr> 
<tr> 
<td>July</td> 
<td>120</td> 
</tr> 
</table> 


Creating Lists 


There are two primary types 
of lists in HTML5: ordered and 
unordered 


Ordered lists use the <ol> 
tag and order items in a list 
using numbers 


Unordered lists use the <ul> 
tag and display items ina 
bulleted list 

You can add items to both 
types of lists using the <li> 
tag 


ORDERED LISTS | 


<h3>Favorite Foods</h3> 
<ol> 
<li>Pizza</li> 
<li>Cake</li> 
</ol> 


UNORDERED LISTS | 


<h3>Seattle To-Do List</h3> 
<ul> 
<Li>Visit Space Needle</li> 
<li>Buy rain jacket</li> 
</ul> 


Lists Demo 


<body> 
<h3>Favorite Foods</h3> 
<ol> 
<li>P1izza</li> 
<li>Cake</li> 
</ol> 


<h3>Seattle To-Do List</h3> 
<ul> 
<li>Visit Space Needle</li> 
<li>Buy rain jacket</li> 
</ul> 
</body> 


Input and Forms 


Mae 


First Name 


| 


Last Name 


| 


Email Address 


| 


Web Forms 


¢ A Web form is a page that features 
input fields where users enter data 


¢ Form input, or the data supplied by 
users, iS sent to a server where it Is 
processed and stored 


¢ Web forms are commonly used when 
making purchases, signing up for 
newsletters, or completing surveys 


Form Creation 


Create a form using the <form> element 
¢ It’s Common practice to use an Id attribute with forms 
The <Label> element displays a label for each field 
The <input> element is used to dictate the type of input that is 
expected 
<form id="contact" method="post" action=""> 
<Label for=“firstName">First Name</label> 
<input type="text" name="“firstName" /><br/> 
<label for=“lLastName">Last Name</label> 
<input type="text" name=“LastName" /><br/> 
<lLabel for="email">Email</label> 
<input type="email" name="email" /><br/> 
</form> 


Types of Input 


INPUT TYPE | DESCRIPTION 


text 
password 
Submit 
radio 
checkbox 
date 
email 


search 


Creates a text field 

Creates a password field that 

Creates a submit button 

Creates a radio button that can be selected 
Creates a checkbox field that can be checked 
Requires users to enter a valid date 

Requires users to enter a valid email address 


Creates a search field 


Input Attributes and Values 


There are a number of 
attributes that can be used with 
the <input> element to 
enhance Web forms 


¢ Use the autofocus attribute to point the 
focus to a specific input field when a Web 
page loads 

¢ Use the required attribute when a field is 
required 

¢ Use the placeholder attribute to add text 


to a field that will help users know what to 
enter 


autofocu 


<input type="texté name="firstName" 
autofocus="autofocus" /> 


required 


<input type="email” required /> 


placehold 
<input i Aegriteae = | alba firstName" 
placeholder="Frrst Name" /> 


Web Form Demo 


<body> 


<hl>Form Demo!</h1> 
<form id="contact" method="post" action=""> 


<label 
<input 
Name"/><br/> 
<label 
<input 
<label 
<input 


for=“firstName">First Name</label> 
type="text" name=“firstName" placeholder="First 


for=“LastName">Last Name</label> 

type="text" name=“LastName" placeholder="Last Name"/><br/> 
for="email">Email</label> 

type="email" name="email" placeholder="Email 


Address” /><br/> 
<label for="password">Password</label> 


<input 


type="password" name="password" 


placeholder="Password"/><br/> 
<input type="Submit" name="sSubmit" value="sSubmit"> 


</form> 
</body> 


Form Validation 


Form Validation 


that the information obtained froma eno Fens 
form is in the appropriate format 
* Common issues that arise with forms Email Address 
are: 
* empty fields 
* invalid email addresses Please provide 
* invalid dates SUBMIT a valid email 


address. 


¢ text vs. numbers and vice versa 

° In HTML 4.01, validation required the 
use of JavaScript, but HTML5 now 
offers automatic validation 


Client-Side 
Validation 


* When a browser validates data 
First Name provided by a user, it is called client- 


side validation 
* if validation is performed by a server, 
Last Name Please provide then it’s called server-side validation 


a valid email ° If a user enters the wrong value into a 
address. form field, then the browser will 
Email Addres instruct them to correct the error 


* the browser determines if the data is 


valid by reading attributes in the 
form’s tags, such as the pattern 
attribute 


Summary 


Semantic HTML 
Tables and Lists 
Input and Forms 


Form Validation 
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